<template>
  <div v-if="hackReset">
    <div
      class="list-node"
      @click.prevent.stop="nodeSingleClick(node,$event);"
      @dblclick.prevent.stop="$emit('dblclick',node,$event)"
      @contextmenu.prevent.stop="$emit('contextmenu',node,$event)"
    >
      <i v-for="(num,key) in numberNode" :key="key" class="list-node-icon" />
      <i :class="['list-node-icon',node.selected?'fas fa-check-circle':'far fa-circle']" @click.prevent.stop="nodeMultiClick(node,$event)" />
      <i :class="['list-node-icon',{[expanded?'far fa-minus-square':'far fa-plus-square']:hasChild}]" @click="expanded=!expanded" />
      <icon-show v-if="showIcon" class="list-node-icon" :src="node" />
      <span class="list-node-text" :title="node.info?node.info.hint:node[treeTemplate.label]">{{ node[treeTemplate.label] }}</span>
      <i :class="['list-node-icon',{[expanded?'fa fa-angle-up':'fa fa-angle-down']:hasChild}]" />
    </div>
    <node-select-multi
      v-for="(item, index) in children"
      v-show="expanded"
      :key="index"
      class="list-child"
      :node="item"
      :data="data"
      :num-node="numberNode"
      :tree-template="treeTemplate"
      :expand="expand"
      :show-icon="showIcon"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
  </div>
</template>
<script>
export default {
  name: 'NodeSelectMulti',
  components: {
    IconShow: () => import('@components/IconShow.vue')
  },
  props: {
    node: {
      type: Object,
      required: true,
      default: () => {}
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: {
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: {
      type: Boolean,
      required: false,
      default: false
    },
    showIcon: {
      type: Boolean,
      required: false,
      default: false
    },
    numNode: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      hackReset: true,
      expanded: this.expand
    }
  },
  computed: {
    children() {
      return this.data && this.node
        ? this.node.children ||
          (this.node[this.treeTemplate.key] ? this.data.filter(item => item[this.treeTemplate.parent] === this.node[this.treeTemplate.key]) : []) ||
          (this.node[this.treeTemplate.item] ? this.data.filter(item => item[this.treeTemplate.parent] === this.node[this.treeTemplate.item]) : [])
        : []
    },
    hasChild() {
      return this.children && this.children.length > 0
    },
    numberNode() {
      return this.numNode + 1
    }
  },
  watch: {
    expand(val, oldval) {
      this.expanded = val
    }
  },
  methods: {
    nodeSingleClick(data, event) {
      data.selected = !data.selected
      this.$emit('click', data, event)
      this.refresh()
    },
    nodeMultiClick(data, event) {
      data.selected = !data.selected
      for (const item of this.data) {
        if (item.branch.indexOf(data.uid) !== -1) {
          item.selected = data.selected
        }
      }
      this.$emit('click', data, event)
      this.refresh()
    },
    refresh(event) {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
    }
  }
}
</script>
<style scoped>
.list-node {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  color: #606266;
}
.list-node:hover {
  background-color: #f5f7fa !important;
}
.list-node-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-node-icon {
  width: 1.8rem;
  text-align: center;
}
.list-node .list-node-icon:first-child {
  display: none;
}
.fa-angle {
  text-align: right
}
</style>
